<template>  
    <div id="main" ref="echarDom">
            
    </div>
    
</template>
<script setup>
import * as echarts from 'echarts';
import { onUnmounted } from 'vue';
import { onMounted } from 'vue';
const echarDom= ref(null);
let myChart = null;
// 基于准备好的dom，初始化echarts实例
onMounted(()=>{
    // console.log(echarDom.value);
    // const w = echarDom.value.offsetWidth;
    // const h = echarDom.value.offsetHeight;

     myChart = echarts.init(echarDom.value);
// 绘制图表
const options = {
  title: {
    text: '产品七日变化',
    left: 'center',


  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
myChart.setOption(options);

    
})

window.addEventListener("resize",()=>{
    // 重新渲染
    myChart && myChart.resize();
})

// 当前组件卸载时，记得卸载
onUnmounted(()=>{
    myChart.dispose();
})

</script>
<style scoped>
#main{
    height: 400px;
    width: 100%;
    background-color: rgb(241, 246, 246);
    padding-top: 10px;
    margin: 0 20px;
}
</style>

